<template>
  <div class="layoutCon">
    <div class="breadcrumb">
      <router-link class="home" to="/"></router-link> > <router-link to="/my">마이페이지</router-link> > 채용정보 관리
    </div>
    <div class="layoutMy">
      <user-center-nav></user-center-nav>
      <div class="myCon">
        <div class="comList">
          <div class="tit nm">
            <h2>채용정보 관리</h2>            
            <el-button class="btn" @click="createJob">채용정보 등록하기</el-button>
            <p class="small">※ 상태에 따른 채용정보 노출여부 : <span class="orange">채용대기(미노출)</span>, <span class="green">채용중(노출)</span>, <span class="blue">채용완료(미노출)</span></p>
          </div>
          <div class="loadList" v-loading="pageConfig.loading&&pageConfig.page==1">
            <ul v-if="listData.length">
              <li v-for="(item,index) in listData" :key="item.index">
                <div class="time">
                  <em class="red" v-if="item.edit_status==0">임시저장</em>
                  <em class="orange" v-if="item.edit_status==1&&item.status==0">채용대기</em>
                  <em class="green" v-if="item.edit_status==1&&item.status==1">채용중</em>
                  <em v-if="item.edit_status==1&&item.status==2">채용완료</em>
                  {{item.updated_at}}
                </div>
                <strong>{{item.title}}</strong>
                <el-button class="r btn" :loading="item.isLoading" @click="showInfo(item.id,index)">수정하기</el-button>
              </li>         
            </ul>
            <div class="notData" v-if="!pageConfig.loading&&listData.length==0">등록된 채용정보가 없습니다.</div>
            <div class="loadMore" v-if="!pageConfig.isAll">
              <el-button type="primary" :loading="pageConfig.loading" @click="loadMore" class="btnMore">더보기</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <resume-card type="userCenter" :cardParams="cardData" @editJob="editJob" @changeLoad="changeLoad"></resume-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import {myJobList} from '@/api';
import userCenterNav from '@/components/userCenterNav'
import resumeCard from '@/components/resumeCard'

export default {
  name:'',
  components:{userCenterNav,resumeCard},
  props:[],
  data(){
    return {
      pageConfig:{
        page:1,
        per:10,
        loading:false,
        isAll:true
      },
      cardData:null,
      listData:[],
      curIndex:-1,
    }
  },
  computed:{},
  created(){
    this.getJobList();
  },
  mounted(){},
  methods:{
    async getJobList(){
      this.pageConfig.loading=true;
      let res = await myJobList({page:this.pageConfig.page,per:this.pageConfig.per});
        if (res.code == 200) {
          this.pageConfig.page+=1;
          let _arry=res.data.data;
          if(_arry.length){
            _arry.forEach((o)=>{
              o.isLoading=false;
            })
            this.listData=this.listData.concat(_arry);
          } 
          !res.data.next_page_url?(this.pageConfig.isAll=true):(this.pageConfig.isAll=false);
          this.pageConfig.loading=false;            
        }else{
          this.pageConfig.loading=false;  
        }
    },
    loadMore(){
      !this.pageConfig.loading&&this.getJobList();
    },    
    showInfo(id,index ){
      this.curIndex>-1&&(this.listData[this.curIndex].isLoading=false);
      this.curIndex=index;
      this.listData[index].isLoading=true;       
      this.cardData={
        isShow:true,
        id:id
      }
    },
    changeLoad(){
      this.listData[this.curIndex].isLoading=false;
    },
    editJob(id){
      this.$router.push({path:'/my/job/manager',query:{job_id:id}})
    },
    createJob(){
      this.$router.push('/my/job/manager?type=new')
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
 @import "@/assets/styles/my.scss";
</style>